<template>
	<main-content
		:tableHeight.sync="tableHeight"
		:otherDependenComponents="otherDependenComponents"
	>
		<template slot="query">
			<el-form
				ref="form"
				:inline="true"
				:model="queryData"
				label-suffix=":"
				class="flex-warp-container"
			>
				<el-form-item
					label="所属商户"
					class="flex-row-container"
					label-width="77px"
				>
					<merchant-select
						v-model="queryData.merchantId"
					></merchant-select>
				</el-form-item>
				<el-form-item class="flex-row-container" label-width="77px">
					<el-input
						placeholder="请输入"
						class="input-with-select"
						v-model.trim="queryData.userName"
						v-input="{ name: 'symbols' }"
						clearable
					>
						<el-select
							v-model="queryData.userType"
							slot="prepend"
							:placeholder="$t('common.please_choose')"
							@change="handleChangeUserType"
							style="width: 110px"
						>
							<el-option label="代理账号" :value="1" />
							<el-option label="直属上级" :value="2" />
							<el-option label="总代账号" :value="3" />
						</el-select>
					</el-input>
				</el-form-item>
				<el-form-item label="合营码">
					<el-input
						v-input="{ name: 'symbols' }"
						v-model="queryData.joinCode"
						:maxlength="11"
						clearable
						size="medium"
						:placeholder="$t('common.please_enter')"
					></el-input>
				</el-form-item>
				<el-form-item
					label="业务模式"
					class="flex-row-container"
					label-width="77px"
				>
					<el-select
						v-model="queryData.businessModel"
						size="medium"
						:placeholder="$t('common.select_all')"
						style="width: 200px"
						clearable
					>
						<el-option
							v-for="item in businessModelList"
							:key="item.code"
							:label="item.description"
							:value="item.code"
						></el-option>
					</el-select>
				</el-form-item>
				<el-form-item
					label="风控项目"
					class="flex-row-container"
					label-width="77px"
				>
					<el-select
						v-model="queryData.riskControlStatus"
						size="medium"
						:placeholder="$t('common.select_all')"
						style="width: 200px"
						clearable
						multiple
					>
						<el-option
							v-for="item in riskControlStatusList"
							:key="item.code"
							:label="item.description"
							:value="item.code"
						></el-option>
					</el-select>
				</el-form-item>
				<el-form-item>
					<el-button
						type="primary"
						icon="el-icon-search"
						:disabled="loading"
						size="medium"
						@click="search"
					>
						{{ $t('common.search') }}
					</el-button>
					<el-button
						icon="el-icon-refresh-left"
						:disabled="loading"
						size="medium"
						@click="reset"
					>
						{{ $t('common.reset') }}
					</el-button>
					<el-button
						v-if="hasPermission('90870071')"
						type="warning"
						icon="el-icon-download"
						size="medium"
						:loading="exportBtnLoading"
						@click="handleExportExcel"
					>
						{{ $t('common.export') }}
					</el-button>
				</el-form-item>
			</el-form>
		</template>
		<template slot="content">
			<el-table
				v-loading="loading"
				element-loading-spinner="el-icon-loading"
				border
				size="mini"
				class="small-size-table"
				:data="tableData"
				style="width: 100%"
				:header-cell-style="getRowClass"
				:max-height="tableHeight"
				highlight-current-row
			>
				<el-table-column
					align="center"
					label="代理账号"
					min-width="100"
				>
					<template slot-scope="scope">
						{{ scope.row.proxyName || '-' }}
					</template>
				</el-table-column>
				<el-table-column align="center" label="合营码" min-width="100">
					<template slot-scope="scope">
						{{ scope.row.joinCode || '-' }}
					</template>
				</el-table-column>
				<el-table-column
					prop="merchantName"
					align="center"
					label="所属商户"
					min-width="100"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						{{ scope.row.merchantName || '-' }}
					</template>
				</el-table-column>
				<el-table-column
					min-width="100"
					prop="parentProxyName"
					align="center"
					label="直属上级"
				>
					<template slot-scope="scope">
						{{
							scope.row.parentProxyName == '0'
								? '-'
								: scope.row.parentProxyName
						}}
					</template>
				</el-table-column>
				<el-table-column
					prop="topProxyName"
					align="center"
					label="总代账号"
					min-width="100"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						{{ scope.row.topProxyName || '-' }}
					</template>
				</el-table-column>
				<el-table-column
					prop="businessModel"
					align="center"
					label="业务模式"
					min-width="120px"
				>
					<template slot-scope="scope">
						<el-link type="danger">
							{{
								scope.row.businessModel === 1
									? '现金模式'
									: '信用模式'
							}}
						</el-link>
					</template>
				</el-table-column>
				<el-table-column
					prop="createdAt"
					align="center"
					label="风控项目"
					min-width="120"
					show-overflow-tooltip
				>
					<template slot="header">
						<span class="flexBox">
							<span>风控项目</span>
							<el-tooltip
								class="item"
								effect="dark"
								placement="top-start"
							>
								<span slot="content">
									净资产锁定、净资产告警、净资产解锁
								</span>
								<i class="el-icon-question"></i>
							</el-tooltip>
						</span>
					</template>
					<template slot-scope="scope">
						<el-link
							:underline="false"
							:type="
								riskControlStatusMap[
									scope.row.riskControlStatus
								] &&
								riskControlStatusMap[
									scope.row.riskControlStatus
								].type
							"
						>
							{{
								(riskControlStatusMap[
									scope.row.riskControlStatus
								] &&
									riskControlStatusMap[
										scope.row.riskControlStatus
									].name) ||
								'-'
							}}
						</el-link>
					</template>
				</el-table-column>
				<el-table-column
					prop="topProxyName"
					align="center"
					label="风控详情"
					min-width="200"
				>
					<template slot-scope="scope">
						当前团队净资产为
						<span :style="handleNumberColor(scope.row.netAssets)">
							{{
								handleNumber(
									scope.row.currency,
									scope.row.netAssets
								)
							}}
						</span>
						，
						<span v-if="scope.row.netAssetsWindLockType == 1 && scope.row.riskControlStatus !== '2'">
							已人工操作
							<span
								:style="{
									color:
										riskControlStatusMap[
											scope.row.riskControlStatus
										] &&
										riskControlStatusMap[
											scope.row.riskControlStatus
										].color
								}"
							>
								{{
									(riskControlStatusMap[
										scope.row.riskControlStatus
									] &&
										riskControlStatusMap[
											scope.row.riskControlStatus
										].desc) ||
									''
								}}
							</span>
						</span>
						<span v-else>
							{{ scope.row.riskControlStatus == 0 ? '高' : '低' }}
							于净资产{{
								scope.row.riskControlStatus == 0 ||
								scope.row.riskControlStatus == 1
									? '锁定'
									: '告警'
							}}阈值
							<span
								v-if="
									scope.row.netAssetsWindLockStatus == 2 ||
									scope.row.netAssetsWindAlarmThreshold == 2
								"
								:style="
									handleNumberColor(
										scope.row.riskControlStatus == 2
											? scope.row
													.netAssetsWindAlarmThreshold
											: scope.row
													.netAssetsWindLockThreshold
									)
								"
							>
								{{
									handleNumber(
										scope.row.currency,
										scope.row.riskControlStatus == 2
											? scope.row
													.netAssetsWindAlarmThreshold
											: scope.row
													.netAssetsWindLockThreshold
									)
								}}
							</span>
							，已{{
								scope.row.riskControlStatus == 0 ? '' : '触发'
							}}
							<span
								:style="{
									color:
										riskControlStatusMap[
											scope.row.riskControlStatus
										] &&
										riskControlStatusMap[
											scope.row.riskControlStatus
										].color
								}"
							>
								{{
									(riskControlStatusMap[
										scope.row.riskControlStatus
									] &&
										riskControlStatusMap[
											scope.row.riskControlStatus
										].desc) ||
									''
								}}
							</span>
						</span>
					</template>
				</el-table-column>
				<el-table-column
					prop="createdAt"
					align="center"
					label="触发时间"
					min-width="150"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						{{ scope.row.createdAt || '-' }}
					</template>
				</el-table-column>
			</el-table>
			<!-- 分页 -->
			<el-pagination
				:total="total"
				:current-page.sync="pageNum"
				class="pageValue"
				background
				layout="total, sizes,prev, pager, next, jumper"
				:page-size="pageSize"
				:page-sizes="pageSizes"
				:pager-count="9"
				@current-change="handleCurrentChange"
				@size-change="handleSizeChange"
			></el-pagination>
		</template>
	</main-content>
</template>

<script>
import list from '@/mixins/list'
import MainContent from '@/components/MainContent/index.vue'

export default {
  components: {
    MainContent
  },
  mixins: [list],
  data() {
    return {
      exportBtnLoading: false,
      riskControlStatusMap: {
        0: {
          type: 'success',
          name: '净资产解锁',
          desc: '解锁',
          color: '#67C23A'
        },
        1: {
          type: 'danger',
          name: '净资产锁定',
          desc: '净资产锁定',
          color: '#F56C6C'
        },
        2: {
          type: 'warning',
          name: '净资产告警',
          desc: '净资产告警',
          color: '#F56C6C'
        }
      },
      businessModelList: [
        {
          description: '现金模式',
          code: 1
        },
        {
          description: '信用模式',
          code: 2
        }
      ],
      riskControlStatusList: [
        {
          description: '净资产解锁',
          code: 0
        },
        {
          description: '净资产告警',
          code: 2
        },
        {
          description: '净资产锁定',
          code: 1
        }
      ],
      tableHeight: 480,
      otherDependenComponents: [],
      queryData: {
        merchantId: '',
        userName: '',
        userType: 1,
        joinCode: '',
        businessModel: '',
        riskControlStatus: []
      },
      tableData: []
    }
  },
  created() {
    this.queryData.userName = this.$route.query.proxyName || ''
    this.queryData.userType = this.$route.query.proxyName ? 3 : 1
  },
  methods: {
    handleChangeUserType(val) {
      this.queryData.userName = ''
    },
    handleExportExcel() {
      this.exportBtnLoading = true
      let params = {
        ...this.queryData
      }
      params = {
        ...this.getParams(params)
      }
      this.exportExcelPublic({
        api: 'windControllerCreditProxyExport',
        params
      }).finally(() => {
        this.exportBtnLoading = false
      })
    },
    loadData() {
      this.loading = true
      this.tableData = []
      let params = {
        ...this.queryData
      }
      params = {
        ...this.getParams(params)
      }
      this.$api
        .windControllerCreditProxyRecordList(params)
        .then((res) => {
          this.loading = false
          if (res?.code === 200) {
            const { record, totalRecord } = res.data || {}
            this.tableData = Array.isArray(record)
              ? Object.freeze(record)
              : []
            this.total = totalRecord || 0
          } else {
            this.$message({
              message:
                res?.msg ||
                this.$t('agent.interface_exceptions'),
              type: 'error'
            })
          }
        })
        .catch(() => {
          this.loading = false
        })
    },
    reset() {
      this.pageNum = 1
      this.queryData = {
        merchantId: '',
        userName: '',
        userType: 1,
        joinCode: '',
        businessModel: '',
        riskControlStatus: []
      }
      this.loadData()
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-icon-question:after {
	font-size: 12px;
	margin-left: 0;
}
</style>
